<template>
  <div>
    <van-row>
      <van-col span="6"><img :src="avatarSrc" alt="" /></van-col>
      <van-col span="10">11</van-col>
      <van-col span="8"><van-icon name="22" /></van-col>
    </van-row>
    <van-grid :column-num="3">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

    <!-- 登录弹出框 -->
    <van-popup>
      <van-form>
        <van-field
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block color="darkred" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </van-popup>

    <!-- 退出登录确认框 -->
    <van-dialog title="请确认" show-cancel-button >
      确认退出登录吗？
    </van-dialog>
  </div>
</template>

<script>
import avatarSrc from "../assets/avatar.png";
export default {
  data() {
    return {
      avatarSrc,
    };
  },
};
</script>
 
<style lang = "less" scoped>
.van-row {
  padding: 0.2rem 0.1rem;
  background-color: #333;
  color: #fff;

  .van-col {
    line-height: 0.7rem;
    img {
      width: 0.7rem;
      display: block;
      border-radius: 50%;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup {
  width: 85%;
}

/deep/.van-grid-item__content {
  padding: 0.3rem 0.08rem;
}
/deep/.van-dialog__content {
  text-align: center;
  line-height: 0.8rem;
}
</style>